<script setup lang="ts">
import { useRouter } from "vue-router";

import { NFlex } from "naive-ui";
import { NCard } from "naive-ui";
import { NInput } from "naive-ui";
import { NGradientText } from "naive-ui";
import { NSwitch } from "naive-ui";
import { NButton } from "naive-ui";

const router = useRouter();

const forgetPassword = (): void => {
  router.push("/forget-password");
};

const register = (): void => {
  router.push("/register");
};

const login = (): void => {
  router.push("/home");
};
</script>

<template>
  <n-flex inline align="center" justify="end" class="w-full h-full">
    <n-flex justify="center" class="w-2/3">
      <n-card class="w-2/5">
        <n-flex vertical>
          <n-gradient-text type="success" :size="36"> 登录 </n-gradient-text>
          <n-input placeholder="请输入用户名"></n-input>
          <n-input placeholder="请输入密码"></n-input>
          <n-flex justify="space-around" align="center" class="w-full pt-2">
            <n-switch>
              <template #checked> 记住密码：开 </template>
              <template #unchecked> 记住密码：关 </template>
            </n-switch>
            <n-button type="warning" @click="forgetPassword">
              忘记密码
            </n-button>
          </n-flex>
        </n-flex>
        <n-flex justify="space-around" align="center" class="w-full pt-3">
          <n-button type="info" @click="register">注册</n-button>
          <n-button type="success" @click="login">登录</n-button>
        </n-flex>
      </n-card>
    </n-flex>
  </n-flex>
</template>

<style scoped></style>
